<template>
  <div class="box contenBox">
    <div class="divForm">
      <el-form
        :model="formData"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item
              label="库区编号"
              prop="code"
            >
              <el-input
                v-model="formData.code"
                placeholder="请输入"
                clearable
                disabled="disabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="所属仓库"
              prop="warehouseId"
            >
              <el-select
                v-model="formData.warehouseId"
                placeholder="请选择"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in warehouseData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="库区名称"
              prop="name"
            >
              <el-input
                v-model="formData.name"
                placeholder="请输入"
                maxlength="10"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="温度类型"
              prop="temperatureType"
            >
              <el-select
                v-model="formData.temperatureType"
                placeholder="请选择"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in temperatureTypeData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">

          <el-col :span="6">
            <el-form-item
              label="承重类型"
              prop="bearingType"
            >
              <el-select
                v-model="formData.bearingType"
                placeholder="请选择"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in bearingTypeData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="用途属性"
              prop="useType"
            >
              <el-select
                v-model="formData.useType"
                placeholder="请选择"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in useTypeData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="负责人"
              prop="personName"
            >
              <el-input
                v-model="formData.personName"
                placeholder="请输入"
                maxlength="10"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话">
              <el-input
                v-model="formData.phone"
                placeholder="请输入"
                clearable
                @change="handleBlur"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="24">
            <el-form-item
              label="库区状态"
              prop="status"
            >
              <el-radio-group v-model="formData.status">
                <el-radio :label=1>启用</el-radio>
                <el-radio :label=0>停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="buttonBox">
      <base-button
        class="unimportanceButton btnReturn"
        @click="btnReturn"
      >返回</base-button>
      <base-button
        class="minorImportantButton btnSave"
        @click="btnSave"
      >提交</base-button>
    </div>
  </div>
</template>
<script lang="ts">
import { Component } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import { ElForm } from 'element-ui/types/form'
// 关闭窗口
import SinglePage from '@/mixin/single-page'
// 公用组件
// 按钮
import BaseButton from '@/components/base-button/index.vue'
// 基本数据
import {
  temperatureTypeOptions, // CW
  bearingTypeOptions, // CZ
  useTypeOptions // YT
} from '@/utils/common-select-data'
// interface接口
import {
  ICommonReturn,
  ICommonSelectOptionsString
} from '@/utils/common-interface'
// api数据接口
import { generateWarehouseCode } from '@/api/common-api'
import { addArea, updateArea, getAreaListDetails } from '@/module-base/api/area'
import { getAllWarehouse } from '@/module-base/api/warehouse'
@Component({
  name: 'AreaAdd',
  components: {
    BaseButton
  }
})
export default class extends mixins(SinglePage) {
  private formData = {
    code: '',
    warehouseId: '',
    name: '',
    temperatureType: '',
    bearingType: '',
    useType: '',
    status: 1,
    personName: '',
    phone: ''
  }

  private temperatureTypeData: ICommonSelectOptionsString[] = [] // 常温类型
  private bearingTypeData: ICommonSelectOptionsString[] = [] // 承重类型
  private useTypeData: ICommonSelectOptionsString[] = [] // 用途类型
  private warehouseData = []
  // 校验表单
  private rules = {
    code: [{ required: true, message: '请输入编码', trigger: 'blur' }],
    warehouseId: [
      { required: true, message: '请选择仓库类型', trigger: 'change' }
    ],
    name: [{ required: true, message: '请输入库区名称', trigger: 'blur' }],
    temperatureType: [
      { required: true, message: '请选择温度类型', trigger: 'change' }
    ],
    bearingType: [
      { required: true, message: '请选择承重类型', trigger: 'change' }
    ],
    useType: [{ required: true, message: '请选择用途类型', trigger: 'change' }],
    personName: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
    status: [{ required: true, message: '请选择状态', trigger: 'change' }]
  }

  mounted() {
    this.initData()
    this.getWarehouseData()
  }
  // 功能
  // 获取select数据

  private async initData() {
    this.temperatureTypeData = temperatureTypeOptions
    this.bearingTypeData = bearingTypeOptions
    this.useTypeData = useTypeOptions
    const id = this.$route.params.id
    if (id === 'null') {
      // 新增操作
      const { data } = await generateWarehouseCode('KQ')
      this.formData.code = data
    } else {
      // 获取修改数据
      const { data } = await getAreaListDetails(id)
      this.formData = {
        ...data
      }
    }
  }
  // 所属仓库

  private async getWarehouseData() {
    const { data } = await getAllWarehouse({ status: 1 })
    // if (data.code === 0) {
    //   debugger
    //   this.warehouseData = data
    // }
    this.warehouseData = data
  }
  // 提交数据

  private btnSave() {
    (this.$refs.ruleForm as ElForm).validate(async(valid: boolean) => {
      if (valid) {
        const form = this.formData
        const params = {
          ...form
        }
        let data: ICommonReturn
        if (this.$route.params.id === 'null') {
          // 新增操作
          data = ((await addArea(params)) as unknown) as ICommonReturn
        } else {
          // 编辑
          data = ((await updateArea(params)) as unknown) as ICommonReturn
        }
        if (data.code === 0) {
          this.$message({
            showClose: true,
            message: '恭喜你，提交成功！',
            type: 'success'
          })
          this.closeWindow()
        } else {
          this.$message({
            showClose: true,
            message: data.msg,
            type: 'error'
          })
        }
      } else {
        return false
      }
    })
  }
  // ui
  // 返回

  btnReturn() {
    this.closeWindow()
  }
  // 手机号验证

  private handleBlur(val: any) {
    const reg = /^[1][3-9][0-9]{9}$/
    if (!reg.test(val)) {
      this.$message({
        showClose: false,
        message: '请输入正确的手机号',
        type: 'error'
      })
      return (this.formData.phone = '')
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
<style lang="scss">
.divWarehouseAdd {
  .el-form {
    .el-radio-group {
      width: 100%;
    }
  }
}
</style>
